<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租车服务 - 租车</title>
    <link rel="stylesheet" href="/car_rental/u/css/styles.css">
    <link rel="stylesheet" href="/car_rental/u/css/pro.css">
    <script src="/car_rental/u/js/jquery-3.7.1.min.js"></script>
    <style>
        .car:hover {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 模糊度为 20px 的黑色阴影 */
        }
    </style>
</head>
<body>
<header>
    <h1>租车服务</h1>
    <nav>
        <ul>
            <li><a href="../index.jsp">首页</a></li>
            <li><a href="rent.jsp" class="active">租车</a></li>
            <li><a href="profile.jsp">个人信息</a></li>
            <li><a href="orders.jsp">订单</a></li>
        </ul>
    </nav>
</header>
<main>
    <section id="rent">
        <h2>租车</h2>
        <form id="rent-form">
            <label for="car-type">选择车型:</label>
            <select id="car-type" name="car-type">
                <option value="跑车">跑车</option>
                <option value="小型车">小型车</option>
                <option value="面包车">面包车</option>
                <option value="SUV">SUV</option>
                <option value="电动车">电动车</option>
            </select>
            <button id="get-value-btn" type="button">查询</button>
        </form>
        <h3>可用车辆</h3>
        <div class="car-display" id="car-display">
        </div>
        <div class="pagination">
            <button id="prevPage" type="button">上一页</button>
            <span id="currentPage">当前页：<span id="page">1</span>/<span id="pageCount"></span></span>
            <button id="nextPage" type="button">下一页</button>
        </div>
    </section>
</main>
<footer>
    <p>&copy; 2024 租车服务. 版权所有.</p>
</footer>
</body>
<script>
    $(function () {
        // 初始化页面
        loadCars();

        // 点击查询按钮
        $('#get-value-btn').click(function () {
            loadCars();
        });

        // 分页按钮事件
        $('#prevPage').click(function () {
            var page = parseInt($('#page').text());
            if (page > 1) {
                $('#page').text(page - 1);
                loadCars();
            }
        });
        $('#nextPage').click(function () {
            var page = parseInt($('#page').text());
            var pageCount = parseInt($('#pageCount').text());
            if (page < pageCount) {
                $('#page').text(page + 1);
                loadCars();
            }
        });
    });

    //查询车辆
    function loadCars() {
        var selectedValue = $('#car-type').val();
        var page = $('#page').text();
        selectCar(selectedValue, page);
    }

    //查询车辆AJAX
    function selectCar(type, page) {
        $.get("/car_rental/selectVehiclesServlet", {'type': type, 'page': page}, function (data) {
            var cars = data.data;
            $('#page').text(data.currentPage);
            $('#pageCount').text(data.pageCount);
            console.log(cars);
            var cardiv = $('#car-display');
            cardiv.empty(); // 清空现有内容
            $.each(cars, function (index, car) {
                var carElement = $(
                    '<div class="car">' +
                    '    <img src="../images/'+ car.imgePath +'" alt="经济型">' +
                    '    <h4>' + car.name + '</h4>' +
                    '    <p>价格：¥' + car.price + '/天</p>' +
                    '</div>'
                );
                // 绑定点击事件 跳转详情页
                carElement.click(function () {
                    alert(car.id);
                    window.location.href = '/car_rental/carxxServlet?id='+ car.id;
                });
                cardiv.append(carElement);
            });
        });
    }
</script>

</html>
